<script setup>
import { reactive, readonly, watchEffect } from 'vue'

// 创建原始响应式对象
const original = reactive({
  name: 'Alice',
  info: { age: 20 }
})

// 创建深层只读对象
const readOnlyData = readonly(original)

// 监听变化（仍然有效）
watchEffect(() => {
  console.log('名称:', readOnlyData.name)
  console.log('年龄:', readOnlyData.info.age)
})

// 尝试修改顶层属性 - 被阻止（开发环境警告）
readOnlyData.name = 'Bob'  // 无效

// 尝试修改嵌套属性 - 被阻止（开发环境警告）
readOnlyData.info.age = 21  // 无效

// 修改原始对象会同步反映到只读对象（因为共享数据源）
original.name = 'Charlie'  // 触发更新: 名称: Charlie
original.info.age = 22     // 触发更新: 年龄: 22

import { reactive, shallowReadonly, watchEffect } from 'vue'

// 创建原始响应式对象
const original = reactive({
  name: 'Alice',
  info: { age: 20 }
})

// 创建浅层只读对象
const shallowReadOnlyData = shallowReadonly(original)

// 监听变化（仍然有效）
watchEffect(() => {
  console.log('名称:', shallowReadOnlyData.name)
  console.log('年龄:', shallowReadOnlyData.info.age)
})

// 尝试修改顶层属性 - 被阻止（开发环境警告）
shallowReadOnlyData.name = 'Bob'  // 无效

// 修改嵌套属性 - 允许修改且会触发更新
shallowReadOnlyData.info.age = 21  // 触发更新: 年龄: 21

// 修改原始对象仍然会同步反映
original.name = 'Charlie'  // 触发更新: 名称: Charlie

</script>

<template>

</template>

<style scoped>

</style>